<template>
  <div>
    <div class="app">
      <div id="head">
        <!-- <van-search
        right-icon="search"
        shape="round"
        id="search"
        v-model="value"
        placeholder="卧室效果图"
      /> -->
        <input
          id="search"
          type="text"
          placeholder="卧室装修图"
          onfocus="this.placeholder=''"
          onblur="this.placeholder='卧室装修图'"
        />

        <span class="icon"><img src="../assets/Vector.png" alt="" /></span
        ><input class="btn" type="button" value="+" />

        <div id="two_floor">
          <van-image
            class="tp"
            :src="require('/public/daohang/1.svg')"
            alt="整屋实景"
          >
            <span>整屋实景</span>
          </van-image>

          <router-link to="/xgt">
            <van-image class="tp" :src="require('/public/daohang/2.svg')">
              <span> 效果图 </span>
            </van-image>
          </router-link>
          <!-- <router-link to="/company"> -->
            <van-image class="tp" :src="require('/public/daohang/3.svg')" @click="tabset3">
              <span> 装修公司</span>
            </van-image>
          <!-- </router-link> -->
          <van-image class="tp" :src="require('/public/daohang/4.svg')">
            <span>装修百科</span>
          </van-image>
        </div>
        <div id="twoo_floor">
          <ul>
            <li>推荐</li>
            <li>避坑</li>
            <li>收纳</li>
            <li>客厅</li>
            <li>卧室</li>
            <li>灯光</li>
            <li>阳台</li>
          </ul>
        </div>
      </div>
    </div>

    <div id="three_floor">
      <div class="xgt" v-for="n in 10" :key="n">
        <img src="../assets/TJ/1.jpg" alt="" @click="onimg" />

        <span class="title">梦中情房102平的奶油风 效果图出来啦</span>
        <div class="author">
          <img src="../assets/zuozetu/1.jpg" alt="" />
          <span>志云设计</span>
        </div>
        <div class="author_right">
          <img src="../assets/zuozetu/1.jpg" alt="" />
          <span>志云设计</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      value: "",
    };
  },

  methods: {
    onimg() {
      ImagePreview(["/company/1.svg"]);
    },    
    tabset3(){this.$router.push('/company')},
  },
};
</script>

<style lang="scss" scoped>
.app {
  #head {
    #search {
      position: absolute;
      width: 330px;
      height: 40px;
      left: 14px;
      top: 12px;
      border: 1px solid #4960f7;
      border-radius: 20px;
      text-indent: 12px;
    }
    .icon {
      border-radius: 23px;
      position: absolute;
      width: 45px;
      height: 30px;
      left: 295px;
      top: 19px;
      background: linear-gradient(266.23deg, #4960f7 0%, #6a97fa 100%);
      > img {
        width: 1em;
        margin-top: 7px;
        margin-left: 15px;
      }
    }
    .btn {
      border-radius: 50%;
      border: 1px solid #4960f7;
      position: absolute;
      left: 355px;
      top: 21px;
      text-align: center;
      font-size: 20px;
      background-color: #fff;
    }
    #two_floor {
      width: 375px;
      display: flex;
      margin-top: 85px;
      justify-content: space-around;
      .tp {
        width: 33.85px;
        height: 33.85px;
        > span {
          position: absolute;
          width: 49px;
          display: inline-block;
          font-size: 12px;
          line-height: 17px;
          font-style: normal;
          text-align: center;
          font-weight: 400;
          left: -5px;
        }
      }
    }
  }

  #twoo_floor {
    margin-top: 30px;
    > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      > li {
        font-size: 13px;
      }
    }
  }
}

#three_floor {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 150px;
  .xgt {
    // margin-top: 5px;
    width: 48%;
    margin: 5px 3px 0;
    > img {
      height: 220px;
      width: 100%;
      margin-top: 25px;
    }
  }
  .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    font-family: "PingFang SC";
    font-style: normal;
    color: #333333;
  }

  .author {
    position: absolute;
    margin-top: 10px;
    left: 5px;

    > span {
      position: absolute;
      width: 55px;
      margin-left: 7px;
      font-weight: 400;
      font-size: 13px;
      line-height: 17px;
      color: #999999;
    }
  }
  .author_right {
    position: absolute;
    margin-top: 10px;
    right: 160px;
    > span {
      position: absolute;
      width: 55px;
      margin-left: 7px;
      font-weight: 400;
      font-size: 13px;
      line-height: 17px;
      color: #999999;
    }
  }
}
</style>
